<template>
  <div class="inner-container">
    <hr>
    <div class="section-title">基本信息</div>
    <hr>
    <!-- --------------------------------------------------录入表单-------------------------------------------------------- -->
    <el-form label-width="80px" label-position="left" :model="formData" >
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户编号" prop="id">
            <el-text>{{ formData.id }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单编号" >
            <el-text></el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户状态" prop="status">

            <el-text v-if="formData.status == 10">未订单客户—一客到店</el-text>
            <el-text v-else-if="formData.status == 20" style="color:#FF9900;">未订单客户—二客到店</el-text>
            <el-text v-else-if="formData.status == 30" style="color:#FF9900;">未订单客户—多客到店</el-text>
            <el-text v-else-if="formData.status == 40" style="color:#FF9900;">订单客户—转单中</el-text>
            <el-text v-else-if="formData.status == 50" style="color:#FF9900;">订单客户—已完成</el-text>
            <el-text v-else-if="formData.status == 60" style="color:#FF9900;">订单客户—退/死单</el-text>
            <el-text v-else-if="formData.status == 70" style="color:#FF9900;">待量房客户</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户类型" prop="type">
            <el-text v-if="formData.type == 10">现房客户</el-text>
            <el-text v-else="formData.type == 20">期房客户</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户姓名" prop="name">
            <el-text>{{ formData.name }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户性别" prop="gender">
            <text v-if="formData.gender == 1">男</text>
            <text v-else="formData.gender==0">女</text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="年龄" prop="age">
            <el-text>{{ formData.age }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-text>{{ formData.contactPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="身份证号" prop="idNumber">
            <el-text>{{ formData.idNumber }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="紧急电话" prop="emergencyPhone">
            <el-text>{{ formData.emergencyPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="联系人" prop="emergencyContact">
            <el-text>{{ formData.emergencyContact }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="楼盘名称" prop="propertyName">
            <el-text>{{ formData.propertyName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="户型" prop="houseType">
            <el-text>{{ formData.houseType }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="面积" prop="houseSize">
            <el-text>{{ formData.houseSize }}平方米</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form label-width="80px" label-position="left" :model="formData">
        <el-row>
          <el-col>
            <el-form-item label="楼盘名称" prop="city">
              <el-text style="width: 60px">{{ formData.city }}</el-text>
              <el-text style="width: 70px">{{ formData.district }}</el-text>
              <el-text>{{ formData.propertyAddr }}</el-text>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-form>

    <hr>
    <div class="section-title">定金信息</div>
    <hr>
    <el-form label-width="80px" label-position="left">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="定金金额">
            <el-input placeholder="请输入内容" v-model="saveDepositForm.depositAmount"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="付款方式" prop="payment_method">
            <el-select v-model="saveDepositForm.paymentMethod">
              <el-option value="10" label="微信"></el-option>
              <el-option value="20" label="支付宝"></el-option>
              <el-option value="30" label="银行卡/信用卡"></el-option>
              <el-option value="40" label="先现金"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="付款凭证">
            <el-upload
                v-model:file-list="fileList"
                v-model:action="depositImgUrl"
                name="file"
                limit="4"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl"/>
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="depositAdd">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";

const router = useRouter();


const formData = ref({
  id:undefined,
  type:undefined,
  name:undefined,
  gender:undefined,
  age:undefined,
  contactPhone:undefined,
  idNumber:undefined,
  emergencyPhone:undefined,
  emergencyContact:undefined,
  propertyName:undefined,
  houseType:undefined,
  houseSize:undefined,
  province:undefined,
  city:undefined,
  district:undefined,
  propertyAddr:undefined,
  status:undefined,
})


const id = new URLSearchParams(window.location.search).get('id');
//进入页面回显数据
const selectCustomer = () => {
  request.get('/api/crm/deposit/selectById/'+id).then((res) => {
    formData.value = res.data;
    console.log(res.data);
  })
}
// const ordersData = ref({
//   orderNumber:undefined,
// })
// const tableOrdersData = () => {
//   request.get('/api/crm/deposit/selectOrdersById/'+id).then((res) => {
//     ordersData.value = res.data;
//     console.log(res.data);
//   })
// }
onMounted(() => {
  selectCustomer();
  // tableOrdersData();
})


/**图片上传相关代码结束**/


/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const depositImgUrl = ref(BASE_URL+'/api/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  let imgUrl = uploadFile.response.data;
  request.post(BASE_URL+'/api/file/remove?url='+imgUrl).then(res => {
    ElMessage.success('删除成功')
  })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile.url);
  //console.log(fileList.value[0].response.data);
}
/**图片上传相关代码结束**/

const saveDepositForm = ref({
  depositAmount: undefined,
  paymentMethod: undefined,
  customerId: id,
})
const depositAdd = () => {
  if (fileList.value.length == 0) {
    ElMessage.error('请上传付款凭证');
    return;
  }
  saveDepositForm.value.paymentVoucher = fileList.value[0].response.data;
  console.log(saveDepositForm.value);
  console.log(fileList.value[0].response.data);
  request.post('/api/crm/deposit/insert',saveDepositForm.value).then((res) => {
    ElMessage.success("录入成功");
    router.push('/crm/earnest_money');
  })


}

</script>

<style scoped>

</style>